<template>
  <div class="recruiter-dashboard">
    <!-- 公司信息卡片 -->
    <el-card v-if="needCompany" class="company-form-card">
      <template #header>
        <div class="card-header">
          <span>完善公司信息</span>
          <el-tag type="warning">必填</el-tag>
        </div>
      </template>
      <div class="company-notice">
        <el-alert
          type="info"
          show-icon
          :closable="false"
        >
          <template #title>
            请完善公司信息后再进行招聘管理
          </template>
          <template #default>
            完善的公司信息能够提高求职者的投递意愿，建议您详细填写公司介绍、规模、行业等信息
          </template>
        </el-alert>
      </div>
      <el-button type="primary" @click="companyDialogVisible = true">
        <el-icon><Edit /></el-icon>
        填写公司信息
      </el-button>
    </el-card>

    <!-- 公司信息展示卡片 - 当已有公司信息时显示 -->
    <el-card v-if="!needCompany" class="company-info-card">
      <template #header>
        <div class="card-header">
          <span>公司信息</span>
          <el-button type="primary" link @click="showCompanyInfo">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
        </div>
      </template>
      
      <div class="company-info-content">
        <div class="company-header">
          <h3>{{ companyForm.name || '未设置公司名称' }}</h3>
          <div class="company-meta">
            <el-tag>{{ companyForm.industry || '未设置行业' }}</el-tag>
            <el-tag type="info">{{ companyForm.size || '未设置规模' }}</el-tag>
          </div>
        </div>
        
        <el-divider />
        
        <div class="info-section">
          <h4>公司简介</h4>
          <p class="description">{{ companyForm.description || '暂无公司描述' }}</p>
        </div>
        
        <div class="info-section">
          <h4>联系方式</h4>
          <ul class="contact-list">
            <li>
              <el-icon><Location /></el-icon>
              <span>地址：{{ companyForm.address || '未设置' }}</span>
            </li>
            <li>
              <el-icon><Link /></el-icon>
              <span>网站：{{ companyForm.website || '未设置' }}</span>
            </li>
            <li>
              <el-icon><Phone /></el-icon>
              <span>电话：{{ companyForm.phone || '未设置' }}</span>
            </li>
            <li>
              <el-icon><Message /></el-icon>
              <span>邮箱：{{ companyForm.email || '未设置' }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- 公司信息弹窗 -->
    <el-dialog
      v-model="companyDialogVisible"
      title="公司信息"
      width="50%"
    >
      <el-form
        ref="companyFormRef"
        :model="companyForm"
        :rules="companyRules"
        label-width="100px"
        class="company-form"
      >
        <el-form-item label="公司名称" prop="name">
          <el-input v-model="companyForm.name" placeholder="请输入公司名称"></el-input>
        </el-form-item>
        <el-form-item label="公司描述" prop="description">
          <el-input
            v-model="companyForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入公司描述"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司地址" prop="address">
          <el-input v-model="companyForm.address" placeholder="请输入公司地址"></el-input>
        </el-form-item>
        <el-form-item label="公司网站" prop="website">
          <el-input v-model="companyForm.website" placeholder="请输入公司网站"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="companyForm.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱" prop="email">
          <el-input v-model="companyForm.email" placeholder="请输入联系邮箱"></el-input>
        </el-form-item>
        <el-form-item label="公司规模" prop="size">
          <el-select v-model="companyForm.size" placeholder="请选择公司规模" style="width: 100%">
            <el-option label="少于50人" value="少于50人"></el-option>
            <el-option label="50-99人" value="50-99人"></el-option>
            <el-option label="100-499人" value="100-499人"></el-option>
            <el-option label="500-999人" value="500-999人"></el-option>
            <el-option label="1000-9999人" value="1000-9999人"></el-option>
            <el-option label="10000人以上" value="10000人以上"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry">
          <el-select v-model="companyForm.industry" placeholder="请选择所属行业" style="width: 100%">
            <el-option label="互联网/IT" value="互联网/IT"></el-option>
            <el-option label="金融" value="金融"></el-option>
            <el-option label="教育" value="教育"></el-option>
            <el-option label="医疗健康" value="医疗健康"></el-option>
            <el-option label="制造业" value="制造业"></el-option>
            <el-option label="房地产" value="房地产"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="companyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateCompanyInfo" :loading="submitting">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Edit, Location, Link, Phone, Message } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { checkCompany, createCompany, getCompanyInfo, updateCompany } from '@/api/user'

// 判断是否需要添加公司信息
const needCompany = ref(false)
const submitting = ref(false)
const companyDialogVisible = ref(false)
const companyId = ref(null)

// 公司信息表单
const companyFormRef = ref(null)
const companyForm = reactive({
  name: '',
  description: '',
  address: '',
  website: '',
  phone: '',
  email: '',
  size: '',
  industry: '',
  logo: ''
})

// 表单验证规则
const companyRules = {
  name: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { max: 100, message: '公司名称长度不能超过100个字符', trigger: 'blur' }
  ],
  description: [
    { max: 500, message: '公司描述长度不能超过500个字符', trigger: 'blur' }
  ],
  address: [
    { max: 200, message: '公司地址长度不能超过200个字符', trigger: 'blur' }
  ],
  website: [
    { max: 100, message: '公司网站长度不能超过100个字符', trigger: 'blur' }
  ],
  phone: [
    { max: 20, message: '公司电话长度不能超过20个字符', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
    { max: 100, message: '公司邮箱长度不能超过100个字符', trigger: 'blur' }
  ],
  size: [
    { max: 20, message: '公司规模长度不能超过20个字符', trigger: 'blur' }
  ],
  industry: [
    { max: 50, message: '公司行业长度不能超过50个字符', trigger: 'blur' }
  ]
}

// 检查用户是否已关联公司
const checkCompanyInfo = async () => {
  try {
    const res = await checkCompany()
    if (res.data && res.data.needCompany) {
      needCompany.value = true
    } else {
      needCompany.value = false
    }
  } catch (error) {
    console.error('检查公司信息失败:', error)
    ElMessage.error('检查公司信息失败')
  }
}

// 获取公司信息
const fetchCompanyInfo = async () => {
  console.log('开始获取公司信息');
  try {
    const res = await getCompanyInfo()
    console.log('公司信息API响应:', res);
    if (res.code === 200 && res.data) {
      companyId.value = res.data.id
      // 更新表单数据
      Object.keys(companyForm).forEach(key => {
        if (res.data[key] !== undefined) {
          companyForm[key] = res.data[key]
        }
      })
    } else {
      // 如果没有获取到数据，使用空白表单
      companyId.value = null;
      // 清空表单数据
      Object.keys(companyForm).forEach(key => {
        companyForm[key] = '';
      });
      // 设置默认值
      companyForm.size = '100-499人';
      companyForm.industry = '互联网/IT';
    }
  } catch (error) {
    console.error('获取公司信息失败:', error);
    // 失败时使用空白表单
    companyId.value = null;
    Object.keys(companyForm).forEach(key => {
      companyForm[key] = '';
    });
    companyForm.size = '100-499人';
    companyForm.industry = '互联网/IT';
  }
}

// 显示公司信息
const showCompanyInfo = async () => {
  await fetchCompanyInfo()
  companyDialogVisible.value = true
}

// 更新公司信息
const updateCompanyInfo = async () => {
  if (!companyFormRef.value) return
  
  await companyFormRef.value.validate(async (valid, fields) => {
    if (!valid) {
      return
    }
    
    try {
      submitting.value = true
      if (companyId.value) {
        const res = await updateCompany(companyId.value, companyForm)
        if (res.code === 200) {
          ElMessage.success('公司信息更新成功')
          companyDialogVisible.value = false
        } else {
          ElMessage.error(res.message || '更新失败')
        }
      } else {
        const res = await createCompany(companyForm)
        if (res.code === 200) {
          ElMessage.success('公司信息保存成功')
          companyDialogVisible.value = false
          needCompany.value = false
        } else {
          ElMessage.error(res.message || '保存失败')
        }
      }
    } catch (error) {
      console.error('保存公司信息失败:', error)
      ElMessage.error('保存公司信息失败')
    } finally {
      submitting.value = false
    }
  })
}

// 组件挂载时检查公司信息
onMounted(async () => {
  try {
    // 首先检查用户是否需要添加公司信息
    await checkCompanyInfo()
    
    if (needCompany.value) {
      // 如果需要添加公司信息，自动打开弹窗
      companyDialogVisible.value = true
    } else {
      // 如果已有公司信息，获取并展示
      await fetchCompanyInfo()
    }
  } catch (error) {
    console.error('初始化公司信息失败:', error)
    ElMessage.error('获取公司信息失败')
  }
})
</script>

<style lang="scss" scoped>
.recruiter-dashboard {
  padding: 20px;

  .page-header {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
      margin: 0;
    }
  }

  .company-form-card {
    margin-bottom: 20px;

    .company-notice {
      margin-bottom: 20px;
    }

    .company-form {
      max-width: 800px;
    }
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
  }

  .company-info-card {
    margin-bottom: 20px;

    .company-info-content {
      padding: 20px;

      .company-header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h3 {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
          margin: 0;
        }

        .company-meta {
          display: flex;
          align-items: center;

          .el-tag {
            margin-left: 10px;
          }
        }
      }

      .info-section {
        margin-bottom: 20px;

        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 10px;
        }

        p.description {
          margin: 0;
        }

        ul.contact-list {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            margin-bottom: 10px;
            display: flex;
            align-items: center;

            .el-icon {
              margin-right: 10px;
            }

            span {
              margin: 0;
            }
          }
        }
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .recruiter-dashboard {
    padding: 10px;
  }
}
</style> 